<template>
	<view class="home">
		<view class="scroll">
			<scroll-view  class="list-scroll" scroll-y='true' lower-threshold="30" @scrolltolower="scrollLower">
				
					<!-- 插槽 -->
					<view v-for="item in starList">
						
						<listCard :leaf="item"></listCard>
					
					</view>
					<uni-load-more :status="loadStatus"></uni-load-more>		
				<!-- v-for循环，被包裹起来就不会被触发page页面的滚动条才会触发触底时间 -->
			</scroll-view>
		</view> 
	</view>
</template>

<script>
	import listCard from '@/components/list-card/list-card.vue'
	export default {
		components:{
			listCard
		},
		data() {
			return {
				starList:[],
				params:{
					pageNum:1,
					pageSize:6,
					userid:1,
				},
				loadStatus:'nomore',
				//列表总共有多少页
				pageCount:0,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad(){
			// this.params.userid=this.$baseName.user.userid
			this.params.userid=this.$baseName.user.userid
			this.starFind()
			
		},
		onShow(){
			this.starFind()
		},	
		//上拉加载更多
		onReachBottom(){
			console.log("上拉加载更多message")
			if(this.params.pageNum<this.pageCount){
				this.params.pageNum+=1
				this.starFind()
			}
		},
		methods: {
			starFind(){
				uni.request({
					url:this.$baseUrl+"star/find",
					method:'POST',
					data:this.params,
					//传递参数
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						console.log(res)
						this.starList=res.data.list
						console.log("收藏列表",this.starList)
					}
				})
			},
			getstarCount(){
				uni.request({
					url:this.$baseUrl+"star/count",
					method:'POST',
					data:this.params,
					//传递参数
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		display: flex;
		
	}
	.home{
		display: flex;
		flex-direction: column;
		//垂直排列
		flex:1;
		.scroll{
				flex:1;		
				overflow: hidden;	
				box-sizing: border-box;
				.list-scroll{
					height: 100%;		
					display: flex;						
					flex-direction: column;
					.bigIcon{
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
					}
				}
			}
			
	}
	
</style>
